function Component(template) {
	this.model = null;
	this.template = template;
	this.addUser = function(user) {
		j.ajax("POST", "addUser", user, {
			"Content-Type":"application/json"
		}, this, function(user) {
			this.model.push(user);
			_render(this.model);
		});
	};

	this.updateUser = function(user) {
		j.ajax("POST", "updateUser", user, {
			"Content-Type":"application/json"
		}, this, function(user) {
			this.model = this.model.filter(function(item) {
				return item.id != user.id;
			});
			this.model.push(user);
			$("#myModal").modal('hide');
			_render(this.model);
		});
	};

	this.findAll = function() {
		j.ajax("GET", "findAll", null, null, this, function(users) {
			this.model = users;
			_render(this.model);
		});

	};

	function _render(data) {
		template.empty();
		$("<tr/>").append($("<th/>").text("ID")).append($("<th/>").text("NAME")).append($("<th/>").text("SEX"))
				.append($("<th/>").text("SALARY")).append($("<th/>").text("BIRTH")).append($("<th/>").text("DEL")).append($("<th/>").text("UPDATE"))
				.appendTo(template);
		data.forEach(function(item) {
			var date = new Date(item.birth);
			var birth = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
			$("<tr/>").append($("<td/>").text(item.id))
				.append($("<td/>").text(item.name))
				.append($("<td/>").text(item.sex))
				.append($("<td/>").text(item.sal))
				.append($("<td/>").text(birth))
				.append($("<td/>").append($("<button/>").text("delete").addClass("btn btn-danger").data(item)))
				.append($("<td/>").append($("<button/>").text("update").addClass("btn btn-warning").data(item)
											.attr("data-toggle","modal").attr("data-target","#myModal")))
				.appendTo(template);
		});
		$("button:contains(del)").on("click", function() {
			$this = $(this);
			j.ajax("DELETE", "deleteUser?id=" + $this.data().id, null, null, this, function(m) {
				data = data.filter(function(item) {
					return item.id != $this.data().id;
				});
				_render(data);
			});

		});
		$("button:contains(update)").on("click", function(){
			$this = $(this);
			$("#modal_id").val($this.data().id);
			$("#modal_name").val($this.data().name);
			if($this.data().sex=="true"){
				$("#modal_sexm").attr("checked",true);
				$("#modal_sexf").attr("checked",false);
			}else{
				$("#modal_sexm").attr("checked",false);
				$("#modal_sexf").attr("checked",true);
			}
			$("#modal_sal").val($this.data().sal);
			$("#modal_birth").val($this.data().birth);
		});
	}

}